<template>
  <div class="ToOrder-info">
    <span class="header"><i class="el-icon-s-goods"></i>确定购买信息</span>
    <div class="content">
      <el-table
          :data="multipleSelection"
          style="width: 100%"
          stripe
      >
        <el-table-column
            label="商品">
          <template slot-scope="scope">
            <img class="bookImg" style="height: 120px" :src="$store.state.baseImgUrl+scope.row.book.img">
            <span class="bookTitle">{{ scope.row.book.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="商品属性"
            width="250">
          <template slot-scope="scope">
            图书规格：{{ scope.row.book.spec }}<br>包装装订：{{ scope.row.book.binding }}<br>
            印张/字数：{{ scope.row.book.sheet }}/{{ scope.row.book.words }}
          </template>
        </el-table-column>
        <el-table-column
            label="单价"
            width="155">
          <template slot-scope="scope">
            ￥{{ scope.row.book.price |rounding }}元
          </template>
        </el-table-column>
        <el-table-column
            label="数量"
            width="105">
          <template slot-scope="scope">
            {{ scope.row.count }}
          </template>
        </el-table-column>
        <el-table-column
            label="小计"
            width="195">
          <template slot-scope="scope">
            ￥{{ scope.row.count * scope.row.book.price |rounding }}元
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <span class="msg"><i class="el-icon-edit"></i>给卖家留言：</span>
      <el-input
          class="remark"
          type="textarea"
          placeholder="备注"
          v-model="remarks"
          :rows="rowNum"
          maxlength="200"
          show-word-limit
          resize="none"
          @focus="focusChange"
          @blur="blurChange"
      >
      </el-input>
      <hr class="hr">
      <div class="last">
        <div class="lastDetail">
          <span class="total">商品合计:
           <span class="icon">￥</span><span class="num">{{ total|rounding }}</span>元
          </span><br>
          <span class="data-head">寄送至：<span class="data-foot address">{{ address }}</span></span><br>
          <span class="data-head">收货人：<span class="data-foot">{{ receiver }}</span></span><br>
        </div>
        <div class="bottom">
          <router-link class="list-group-item" active-class="active" to="/pay">
            <span class="return"><i class="el-icon-shopping-cart-full"></i>返回购物车</span>
          </router-link>
          <el-button class="btn" @click="createOrder">提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ToOrder",
  data() {
    return {
      remarks: '',
      rowNum: 2,
      address: '',
      receiver: '',
      addressId: '',
      select: [],
      toOrderId: '',
    }
  },
  props: {
    multipleSelection: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    total() {
      var total = 0;
      this.multipleSelection.forEach(item => {
        total += item.book.price * item.count;
      });
      return total;
    },
  },
  methods: {
    focusChange() {
      return this.rowNum = 4;
    },
    blurChange() {
      return this.rowNum = 2;
    },
    createOrder() {
      let ids = new Array()
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      this.getRequest('/oms/bookOrder/cart/create', {aid: this.addressId, ids: ids.join(), note: this.remarks}).then(
          res => {
            this.toOrderId = res.data.oid
          }
      ).then(() => {
        this.$router.push({
          path: '/detailToOrder',
          query: {
            from: 'buy',
            oid: this.toOrderId
          }
        })
      })
    }
  },
  mounted() {
    //获取选择的地址、地址id和收货人信息
    this.$bus.$on('selectData', (selectData) => {
      this.address = selectData.address
      this.addressId = selectData.id
      this.receiver = selectData.name + " " + selectData.phone
    })
  },
  beforeDestroy() {
    this.$bus.$off('selectData')
  },
  created() {
    //默认地址和收货人信息 默认地址id
    this.getRequest('/cms/address/getList').then((resp) => {
      this.address = resp.data[0].address
      this.receiver = resp.data[0].name + resp.data[0].phone
      this.addressId = resp.data[0].id
    })
  }
}
</script>

<style scoped>
.ToOrder-info {
  width: 100%;
  margin-top: 40px;
}

.header {
  font: bold 24px 宋体;
  padding-left: 1px;
}

.header i {
  text-shadow: 1px 2px 2px #5c3838;
  padding-right: 5px;
}

.el-table {
  margin-top: 25px;
  padding-left: 50px;
  padding-right: 50px;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #fdfbfb;
}

.bookTitle {
  font-size: 15px;
  position: absolute;
  top: 60px;
  left: 131px;
  width: 58.5%;
}

.bookImg {
  padding-top: 10px;
}

.footer {
  margin-top: 30px;
}

.remark {
  width: 400px;
}

.msg {
  vertical-align: top;
  margin-right: 10px;
  font: 400 18px 华文黑体;
  margin-left: 6px;
}

.msg i {
  margin-right: 7px;
  color: #f87171;
  text-shadow: 3px 1px 2px #908484;
}

.hr {
  margin-top: 20px;
  opacity: 0.4;
}

.last {
  padding-bottom: 100px;
  text-align: right;
}

.lastDetail {
  width: auto;
  display: inline-block;
  border: 5px solid #fde8e8;
  outline: 1px solid #f68484;
  margin-top: 40px;
  padding: 30px 30px 20px 28px;
}

.total, .data-head {
  font: 600 19px 华文黑体;
  color: #3e3d3d;
  display: inline-block;
  margin-bottom: 15px;
}

.total {
  margin-bottom: 35px;
}

.icon {
  color: #9a9999;
  font-size: 35px;
  font-weight: 500;
}

.num {
  margin-left: 5px;
  margin-right: 5px;
  color: #f53f3f;
  font-size: 35px;
}

.data-foot {
  font: 500 20px 宋体;
}

.list-group-item {
  text-decoration: none;
}

.bottom {
  width: 100%;
}

.return {
  margin-right: 45px;
  color: #208de2;
  font-size: 17px;
}

.btn {
  font: 400 20px 华文黑体;
  width: 200px;
  border-radius: 0;
  background: #fa3636;
  position: relative;
  left: 0.3%;
  top: -0.55px;
  color: #5c5656;
  letter-spacing: 2px;
}

.btn:hover {
  color: white;
}

.el-icon-shopping-cart-full {
  padding-right: 3px;
}

::v-deep .el-table th.el-table__cell > .cell {
  padding-left: 10px;
}

.bookImg {
  position: relative;
  left: -25px;
}
</style>